<script setup>
defineOptions({
  name: 'Settings',
});
import { ref } from 'vue';
import { useThemeStore } from '@/stores/modules/theme';
import { layouts } from '@/layouts/Header/com/constant';

const themeStore = useThemeStore();

const open = ref(false);
const layoutSetting = themeStore.layoutSetting;

const changeLayout = (layout) => {
  themeStore.updateLayoutSetting({
    layout,
  });
};
</script>

<template>
  <a-button type="text" class="" @click="open = true">
    <template #icon>
      <i class="fa-solid fa-shirt"></i>
    </template>
  </a-button>
  <a-drawer class="theme-setting" v-model:open="open">
    <a-descriptions title="布局" :column="5">
      <a-descriptions-item v-for="item in layouts" :key="item.value">
        <div
          class="layout-item"
          :class="{ active: layoutSetting.layout === item.value }"
          @click="changeLayout(item.value)"
        >
          <component :is="item.component"></component>
        </div>
      </a-descriptions-item>
    </a-descriptions>
    <a-form :modal="layoutSetting">
      <a-form-item name="themeMode" label="主题色">
        <a-radio-group
          v-model:value="layoutSetting.themeMode"
          button-style="solid"
        >
          <a-radio-button value="light">浅色</a-radio-button>
          <a-radio-button value="realDark">暗黑色</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="colorPrimary" label="配色">
        <input type="color" v-model="layoutSetting.colorPrimary" />
      </a-form-item>
      <a-form-item name="collapsed" label="是否折叠侧边栏">
        <a-checkbox v-model:checked="layoutSetting.collapsed"></a-checkbox>
      </a-form-item>
      <a-form-item name="inline" label="内嵌菜单">
        <a-checkbox v-model:checked="layoutSetting.inline"></a-checkbox>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
